<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<head>
<jsp:include page="/views/include.jsp"></jsp:include>
<script type="text/javascript" src="<c:url value='/js/jquer.json.2.5.1.js'/>"></script>
<script type="text/javascript">
	var columns;
	var shopId = "${shopId}";
	var columns;
	$.parser.onComplete = function() {
		$('body').css('visibility', 'visible');
		setTimeout(function() {
			$('#loading-mask').remove();
		}, 50);
	};

	
	 function ajaxLoading() { 
         $("<div class='datagrid-mask'></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body"); 
         $("<div class='datagrid-mask-msg'></div>").html("正在处理，请稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});
      } 
     
      function ajaxLoadEnd() { 
          $(".datagrid-mask").remove(); 
          $(".datagrid-mask-msg").remove();             
     }
	
	$(function() {
		ajaxLoading();
		init();
		loadCurrentRule();
	});
	
	function init() {
		bindMenu();
		initDataSource();
	}
	
	function bindMenu() {
		$('#tables').bind('contextmenu', function(e) {
			e.preventDefault();
			$('#mm').menu('show', {
				left : e.pageX,
				top : e.pageY
			});
		});
	}
	
	function initDataSource() {
		$('#cc_dataSorce').combobox({
			url : "<c:url value='/etl/mapping_dataSource.tg'/>",
			panelHeight : 'auto',
			valueField : 'dataSource_id',
			textField : 'dataSource_name',
			onSelect : function(rec) {
				$("#cc_table").combobox('clear');
				var url = '<c:url value="/etl/mapping_table.tg"/>?dataSourceId=' + rec.dataSource_id;
				$("#cc_table").combobox('reload', url);
			}
		});
		
		$('#cc_table').combobox({
			panelHeight : 'auto',
			valueField : 'table_id',
			textField : 'table_name'
		});
	}
	
	
	function initColumn() {
		$.ajax({
			typpe : "post",
			url : '<c:url value="/etl/mapping_column.tg"/>',
			dataType : 'json',
			data : {"shopId" : shopId},
			async : false,
			success : function(result) {
				columns = eval(result);
			}
		});
	}
	
	
	function loadCurrentRule() {
		$.ajax({
			url 	: "<c:url value='/etl/mapping_rules.tg' />?shopId=" + shopId,
			type	: "post",
			dataType: "json",
			success : function(result) {
				var data = eval(result);
				$.each(data , function(i , n) {
					addTable(n.table.table_name , n.table.table_id , n.rule_id);
				});
				ajaxLoadEnd();
			}
		});
	}
	

	function reloadItem() {
		var panel = $('#tables').accordion('getSelected');
		if (panel) {
			if (confirm("确定要移除当前选项 ?")) {
				var opts = panel.panel('options');
				var ruleId = opts.rule_id;
				if (ruleId == -99) {
					ruleId = $(panel).find(".rule_id").val();
				}
				$.ajax({
					url		: "<c:url value='/etl/mapping_removeRule.tg' />",
					type	: "post",
					dataType: "json",
					data	: {"ruleId" : ruleId},
					success : function(result) {
						var data = eval(result);
						if (data.success) {
							$('#tables').accordion("remove", panel.panel("header").text());
						}
					}
				});
			} else {
				alert("请选择要移除的选项!");
			}
		}
	}

	function addTable(table_name , table_id , rule_id) {
		if (! table_name) {
			table_name = $('#cc_table').combobox('getText');
		}
		if (! table_id) {
			table_id = $('#cc_table').combobox('getValue');
		}
		if (! rule_id) {
			rule_id = -99;
		}
		
		$('#tables').accordion('add', {
			title 		: '数据表 : ' + table_name,
			width 		: 10000,
			height		: 10000,
			selected	: false,
			animate		: false,
			table_id	: table_id,
			rule_id		: rule_id,
			shopId		: shopId,
			href : '<c:url value="/etl/mapping_rule.tg" />' + '?tableId=' + table_id + '&shopId=' + shopId + '&ruleId=' + rule_id
		});
	}
</script>
</head>
<body style="margin: 0; padding: 0; height: 100%; overflow: hidden; background: #F2FBFF">
	<div region="north" border="false">
		<div class="toolbar">
			<table cellpadding="0" cellspacing="0" style="width: 95%;">
				<tr>
					<td><label>请选择数据源:</label> 
						<input id="cc_dataSorce" class="easyui-combobox" name="dataSourceId" style="width: 200px" required="true" readonly="true"> 
						<label>请选择表:</label> 
						<input id="cc_table" class="easyui-combobox" style="width: 250px" required="true" readonly="true"> 
						<a href="javascript:void(0);" onclick="addTable()" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<div id="tables" class="easyui-accordion">
	</div>
	
	<div id="mm" class="easyui-menu" style="width: 120px;">
		<div onclick="reloadItem()">移除</div>
	</div>
</body>

